<template>
  <section class="tapRecord">
    <el-row class="options-tool">
      <el-button @click="printPDF" type="success" v-if="row.isView"
        >下载</el-button
      >
      <el-button
        class="fr"
        type="primary"
        @click="handleAdd"
        v-if="!row.isAuth && !row.isView && row.status != 4"
        >增加检查组</el-button
      >
      <el-button @click="handleBack" v-if="row.isView">返回</el-button>
    </el-row>
    <div class="panel" ref="pdfContent">
      <el-row class="tapDemand-list">
        <el-row class="item" v-for="(item, index) in list" :key="index">
          <div class="title">
            第 {{ item.groupNumber }} 组
            <div
              class="btns fr"
              @click="handleDelete(index)"
              v-if="!row.isView && index != 0"
            >
              删除
            </div>
          </div>
          <div class="panel">
            <Form
              :formData="item.formData"
              :ref="'form' + index"
              :parentKey="index"
              v-if="item.formData.length"
            />
          </div>
        </el-row>
      </el-row>
      <div class="table p-table">
        <Table
          :columns="columns"
          :tableData="checkUser"
          :operation="operation"
        />
        <div
          class="add"
          @click="onAdd()"
          v-if="!row.isView && !row.isAuth && row.status != 4"
        >
          <i class="el-icon-plus" /> 添加一行
        </div>
      </div>
      <div v-if="row.isAuth">
        <Form :formData="bottomData" ref="bottomData" />
      </div>
      <Process
        :processData="processData"
        v-if="row.isView && processData.length"
      />
      <div class="dialog-footer">
        <el-button
          v-for="(item, index) in formBtns"
          :key="index"
          @click="item.click"
          :type="item.type"
          >{{ item.label }}</el-button
        >
      </div>
    </div>

    <Audit
      @onBack="
        () => {
          this.isAudit = false;
        }
      "
      from="tapRecord"
      :row="row"
      @onSuccess="onSuccess"
      v-if="isAudit"
    />
  </section>
</template>

<script>
import Form from "@/components/form/index.vue";
import Table from "@/components/table/index.vue";
import Audit from "../audit/index.vue";
import Process from "../audit/process.vue";
import moment from "moment";
import {
  vendorRecordsGetInfo,
  vendorRecordsOperatorAudit,
  vendorRecordsResponsibilityAudit,
  vendorRecordsUpdate,
} from "@/api/collect/tapRecord/index";
export default {
  components: {
    Form,
    Table,
    Audit,
    Process,
  },
  props: {
    row: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      processData: [],
      id: "",
      prodTransferRecordId: "",
      isView: false,
      isAudit: false,
      activeKey: 0,
      list: [
        // {
        //   groupNumber: "",
        //   formData: [
        //     {
        //       prop: "checkReportDate",
        //       value: "",
        //       type: "date",
        //       label: "检查报到",
        //       disabled:
        //         this.row.isView || this.row.isAuth || this.row.status == 4,
        //       placeholder: "请选择检查报到",
        //     },
        //     {
        //       prop: "checkDate",
        //       type: "daterange",
        //       label: "检查时间",
        //       placeholder: "请选择检查时间",
        //       tips: "共0天",
        //       value: [],
        //       disabled:
        //         this.row.isView || this.row.isAuth || this.row.status == 4,
        //       change: (value, obj, index) => {
        //         this.updataDate(value, obj, index);
        //       },
        //     },
        //     {
        //       prop: "applyReason",
        //       type: "textarea",
        //       label: "检查事项",
        //       disabled:
        //         this.row.isView || this.row.isAuth || this.row.status == 4,
        //       placeholder: "请输入检查事项",
        //     },
        //     {
        //       prop: "vendorName",
        //       type: "select",
        //       label: "检查对象",
        //       multiple: true,
        //       options: [],
        //       disabled:
        //         this.row.isView || this.row.isAuth || this.row.status == 4,
        //       placeholder: "请选择检查对象",
        //       change: (obj, value, index) => {
        //         obj.checkAddress = [];
        //         this.formData[3].options.forEach((item) => {
        //           if (value.includes(item.value)) {
        //             obj.checkAddress.push(item.label);
        //           }
        //         });
        //         obj.checkAddress = obj.checkAddress.join(",");
        //         this.list[index].formData = this.UpdataForm(
        //           obj,
        //           this.list[index].formData
        //         );
        //       },
        //     },
        //     {
        //       prop: "checkAddress",
        //       type: "textarea",
        //       label: "检查地点",
        //       disabled: true,
        //       placeholder: "请输入检查地点",
        //     },
        //     {
        //       prop: "checkRange",
        //       type: "textarea",
        //       disabled:
        //         this.row.isView || this.row.isAuth || this.row.status == 4,
        //       label: "检查范围",
        //       placeholder: "请输入检查范围",
        //     },
        //   ],
        // },
      ],
      columns: [
        {
          prop: "require",
          label: "序号",
          type: "index",
          width: 180,
          fixed: true,
        },
        {
          prop: "user",
          label: "人员",
          scope: true,
          disabled: this.row.isView || this.row.isAuth || this.row.status == 4,
          input: () => {},
        },
      ],
      operation: [
        {
          label: "删除",
          width: 80,
          type: "danger",
          fixed: true,
          onclick: (key, row, parentKey) => {
            this.checkUser.splice(key, 1);
          },
        },
      ],
      formData: [
        {
          prop: "checkReportDate",
          value: "",
          type: "date",
          label: "检查报到",
          disabled: this.row.isView || this.row.isAuth || this.row.status == 4,
          placeholder: "请选择检查报到",
        },
        {
          prop: "checkDate",
          type: "daterange",
          label: "检查时间",
          placeholder: "请选择检查时间",
          tips: "共0天",
          value: [],
          disabled: this.row.isView || this.row.isAuth || this.row.status == 4,
          change: (value, obj, index) => {
            this.updataDate(value, obj, index);
          },
        },
        {
          prop: "applyReason",
          type: "textarea",
          label: "检查事项",
          disabled: this.row.isView || this.row.isAuth || this.row.status == 4,
          placeholder: "请输入检查事项",
        },
        {
          prop: "vendorName",
          type: "select",
          label: "检查对象",
          multiple: true,
          options: [],
          disabled: this.row.isView || this.row.isAuth || this.row.status == 4,
          placeholder: "请选择检查对象",
          change: (obj, value, index) => {
            obj.checkAddress = [];
            this.formData[3].options.forEach((item) => {
              if (value.includes(item.value)) {
                obj.checkAddress.push(item.label);
              }
            });
            obj.checkAddress = obj.checkAddress.join(",");
            this.list[index].formData = this.UpdataForm(
              obj,
              this.list[index].formData
            );
          },
        },
        {
          prop: "checkAddress",
          type: "textarea",
          label: "检查地点",
          disabled: true,
          placeholder: "请输入检查地点",
        },
        {
          prop: "checkRange",
          type: "textarea",
          disabled: this.row.isView || this.row.isAuth || this.row.status == 4,
          label: "检查范围",
          placeholder: "请输入检查范围",
        },
      ],
      formBtns: [
        //表单按钮
        {
          type: "primary",
          label: "提交审核",
          click: () => {
            this.isAudit = true;
          },
        },
        {
          type: "success",
          label: "保存",
          click: () => {
            let groupList = [];

            this.list.forEach((item,index) => {
              let key='form'+index;
              let obj = {};
              obj.vendorInfoVOList = [];
              item.formData.forEach((subItem) => {
                if (subItem.prop === "checkDate" && subItem.value.length) {
                  obj.checkStartDate = subItem.value[0];
                  obj.checkEndDate = subItem.value[1];
                }
                obj[subItem.prop] = subItem.value;
                if (subItem.prop === "vendorName") {
                  this.vendorInfoVOList.forEach((v) => {
                    if (subItem.value.includes(v.id)) {
                      obj.vendorInfoVOList.push(v);
                    }
                  });
                }
              });
              delete obj.checkDate;
              groupList.push({...obj,...this.$refs[key][0].datas,groupNumber:item.groupNumber});
            });
            let params = {
              batchNo: this.row.batchNo,
              groupList,
              memberList: this.checkUser.map((item) => {
                return item.user;
              }),
            };
            vendorRecordsUpdate(params).then((res) => {
              this.Message("保存成功");
              this.$emit("onSuccess");
            });
          },
        },
        {
          label: "返回",
          click: () => {
            this.$emit("onBack");
          },
        },
      ],
      checkUser: [],
      vendorInfoVOList: [],
      bottomData: [
        {
          prop: "status",
          type: "select",
          options: [
            {
              label: "通过",
              value: "1",
            },
            {
              label: "拒绝",
              value: "0",
            },
          ],
          label: "审批结果",
          value: "1",
        },
        {
          prop: "remark",
          type: "textarea",
          label: "审批意见",
          rows: 4,
          value: "",
        },
      ],
    };
  },
  created() {
    if (this.$route.query.isView || this.row.isView) {
      this.formBtns = [];
      this.operation = [];
    }
    if (this.row.isAuth) {
      this.operation = [];
      this.formBtns = [
        {
          type: "primary",
          label: "确认",
          click: () => {
            if (this.row.status == 4) {
              this.isAudit = true;
              return;
            }
            let params = {
              batchNo: this.row.batchNo,
              ...this.$refs.bottomData.datas,
            };
            vendorRecordsResponsibilityAudit(params).then((res) => {
              this.Message("审核成功");
              this.$emit("onSuccess");
            });
          },
        },
        {
          label: "返回",
          click: () => {
            this.handleBack();
          },
        },
      ];
    }
  },
  mounted() {
    if (this.row.batchNo) {
      this.getDetail();
    }
  },
  methods: {
    //获取详情
    getDetail() {
      vendorRecordsGetInfo({ batchNo: this.row.batchNo }).then((res) => {
        let data = res.data;
        this.detail = data;

        let groupList = data.groupList || [];
        this.processData = data.auditDomainVOList || [];
        if (data.recordCheckMember && data.recordCheckMember.length) {
          this.checkUser = data.recordCheckMember.map((item, index) => {
            return {
              user: item,
            };
          });
        }
        let temp = [];
        if (groupList.length) {
          groupList.forEach((item, index) => {
            item.formData = [
              {
                prop: "checkReportDate",
                value: "",
                type: "date",
                label: "检查报到",
                disabled:
                  this.row.isView || this.row.isAuth || this.row.status == 4,
                placeholder: "请选择检查报到",
              },
              {
                prop: "checkDate",
                type: "daterange",
                label: "检查时间",
                placeholder: "请选择检查时间",
                tips: "共0天",
                value: [],
                disabled:
                  this.row.isView || this.row.isAuth || this.row.status == 4,
                change: (value, obj, index) => {
                  this.updataDate(value, obj, index);
                },
              },
              {
                prop: "applyReason",
                type: "textarea",
                label: "检查事项",
                disabled:
                  this.row.isView || this.row.isAuth || this.row.status == 4,
                placeholder: "请输入检查事项",
              },
              {
                prop: "vendorName",
                type: "select",
                label: "检查对象",
                multiple: true,
                options: [],
                disabled:
                  this.row.isView || this.row.isAuth || this.row.status == 4,
                placeholder: "请选择检查对象",
                change: (obj, value, index) => {
                  obj.checkAddress = [];
                  this.formData[3].options.forEach((item) => {
                    if (value.includes(item.value)) {
                      obj.checkAddress.push(item.checkAddress);
                    }
                  });
                  obj.checkAddress = obj.checkAddress.join(",");
                  this.list[index].formData = this.UpdataForm(
                    obj,
                    this.list[index].formData
                  );
                },
              },
              {
                prop: "checkAddress",
                type: "textarea",
                label: "检查地点",
                disabled: true,
                placeholder: "请输入检查地点",
              },
              {
                prop: "checkRange",
                type: "textarea",
                disabled:
                  this.row.isView || this.row.isAuth || this.row.status == 4,
                label: "检查范围",
                placeholder: "请输入检查范围",
              },
            ];
            let m1 = moment(item.checkStartDate);
            let m2 = moment(item.checkEndDate);
            let day = m2.diff(m1, "day");
            item.formData[1].tips = `共${item.checkStartDate ? day + 1 : 0}天`;
            item.groupNumber = item.groupNumber;
            item.checkDate = item.checkStartDate
              ? [item.checkStartDate, item.checkEndDate]
              : [];

            item.vendorName = [];
            item.checkAddress = [];
            this.vendorInfoVOList = item.vendorInfoVOList || [];
            item.vendorInfoVOList.forEach((v) => {
              v.label = v.vendorName;
              v.value = v.id;
              item.vendorName.push(v.id);
              item.checkAddress.push(v.checkAddress);
            });

            item.checkAddress = item.checkAddress.join(",");
            item.formData[3].options = item.vendorInfoVOList || [];
            this.formData[3].options = item.vendorInfoVOList || [];
            item.formData = this.UpdataForm(
              item,
              item.formData,
              this.row.isView
            );

            temp.push(item);
          });
          this.formData = JSON.parse(JSON.stringify(groupList[0].formData));
          this.list = temp;
        }
      });
    },
    //创建抽调需求表
    handleAdd() {
      let formData = this.formData;
      formData.forEach((item,index) => {
        if(index===1){
          item.change= (value, obj, index) => {
              this.updataDate(value, obj, index);
          };
        }
        if(index===3){
          item.change= (obj, value, index) => {
            obj.checkAddress = [];
            this.formData[3].options.forEach((item) => {
              if (value.includes(item.value)) {
                obj.checkAddress.push(item.checkAddress);
              }
            });
            obj.checkAddress = obj.checkAddress.join(",");
            this.list[index].formData = this.UpdataForm(
              obj,
              this.list[index].formData
            );
          };
        }
      });
      this.list.push({
        groupNumber:this.list.length+1,
        formData,
      });
    },
    //删除抽调需求表
    handleDelete(key) {
      if (this.list.length === 1) {
        this.Message("至少保留一条数据，不可删除", "error");
        return false;
      }
      this.list.splice(key, 1);
    },
    //添加需求列表
    onAdd() {
      this.checkUser.push({});
    },
    //返回
    handleBack() {
      this.$emit("onBack");
    },
    //审核回调
    onSuccess(data) {
      let array = data.nextAudit.split("/");
      let groupList = [];
      this.list.forEach((item,index) => {
        let key='form'+index;
        let obj = {
          ...this.$refs[key].datas,
        };
        obj.vendorInfoVOList = [];
        item.formData.forEach((subItem) => {
          if (subItem.prop === "checkDate" && subItem.value.length) {
            obj.checkStartDate = subItem.value[0];
            obj.checkEndDate = subItem.value[1];
          }
          obj[subItem.prop] = subItem.value;
          if (subItem.prop === "vendorName") {
            this.vendorInfoVOList.forEach((v) => {
              if (subItem.value.includes(v.id)) {
                obj.vendorInfoVOList.push(v);
              }
            });
          }
        });
        delete obj.checkDate;
        groupList.push({...obj,...this.$refs[key][0].datas});
      });
      let params = {
        nextAuditId: array[0],
        nextAuditName: array[1],
        batchNo: this.row.batchNo,
        groupList,
        memberList: this.checkUser.map((item) => {
          return item.user;
        }),
        flag:data.flag?true:false, //监管员审核状态
      };
      if(this.$refs.bottomData){
        params = {
          ...params,
          ...this.$refs.bottomData.datas,
        };
      }

      if (this.row.status == 4) {
        params.status = 1;
        vendorRecordsResponsibilityAudit(params).then((res) => {
          this.Message("审核成功");
          this.$emit("onSuccess");
        });
        return;
      }
      vendorRecordsOperatorAudit(params).then((res) => {
        this.Message("审核成功");
        this.$emit("onSuccess");
      });
    },
    //更新日期
    updataDate(value, obj, index) {
      let m1 = moment(value[0]);
      let m2 = moment(value[1]);
      let day = m2.diff(m1, "day");
      this.list[index].formData[1].tips = `共${day + 1}天`;
      obj.checkDate = value;
      this.list[index].formData = this.UpdataForm(
        obj,
        this.list[index].formData
      );
    },
    //下载pdf
    printPDF() {
      this.PrintPDF("抽调记录表", this);
    },
  },
};
</script>

<style lang="scss">
@import "../../../assets/styles/collect.scss";
.tapRecord {
  padding: 30px;
  .el-form-item {
    width: 100%;
  }
}
.options-tool {
  font-size: 16px;
  text-align: right;
}
.p-table {
  .add {
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: solid 1px #eee;
    cursor: pointer;
    color: #46a6ff;
    &:hover {
      color: #00a0e9;
    }
  }
  margin-bottom: 20px;
}
.tapDemand-list {
  display: flex;
  flex-flow: row wrap;
  padding-top: 20px;
  .el-date-editor {
    width: 75% !important;
  }
  .item {
    width: 500px;
    background: #ffffff;
    box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    border: 1px solid #e5e8ef;
    padding: 20px 0;
    margin: 0 10px 20px;
    .title {
      font-size: 15px;
      font-weight: 600;
      color: #1d2129;
      padding: 0 30px;
      .btns {
        font-size: 14px;
        color: #ff6753;
        cursor: pointer;
      }
    }
    .el-form {
      width: 91%;
    }
    .table {
      width: 90% !important;
      margin: 0 auto;
      border-right: solid 1px #eee;
    }
    .remark {
      margin: 20px 30px;
      .name {
        margin-bottom: 15px;
      }
    }
  }
}

.check-list {
  .input {
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #cdcdcd;
    height: 40px;
    padding: 0 15px;
    cursor: pointer;
  }
  .items {
    background: #f7f8fa;
    border-radius: 2px;
    font-size: 14px;
    padding: 10px;
    margin-top: 10px;
    p {
      margin: 0;
      padding: 0;
      line-height: 20px;
    }
  }
}
.demand-dialog {
  .el-dialog__body {
    padding: 0;
  }
  .footer-btns {
    text-align: right;
    padding: 20px;
  }
  .el-date-editor {
    width: 100%;
  }
}
.demandDialog-panel {
  height: 430px;
  overflow-y: auto;
  padding: 20px;
  .item {
    display: flex;
    margin-bottom: 15px;
    .icon {
      width: 26px;
    }
    .content {
      flex: 1;
      .name {
        font-size: 14px;
      }
      .date {
        margin: 10px 0 0;
      }
    }
  }
}
.footer-btns {
  padding: 10px 20px 20px;
}
.fr {
  float: right;
}
</style>
